<template>
    <div>
        <el-form :inline="true" ref="searchForm" :model="searchForm">            
            <el-form-item>
                <el-button type="primary" @click="showAddAccount">新增</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tbpg.tableData" border  height="611" highlight-current-row>
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="account" label="账号"></el-table-column>
            <el-table-column prop="pwd" label="密码"></el-table-column>
            <el-table-column prop="pwdKey" label="密钥"></el-table-column>            
            <el-table-column prop="supplierName" label="供应商"></el-table-column>
            <el-table-column prop="typeName" label="所属类别 "></el-table-column>
            <el-table-column prop="smsAccount" label="短信账号"></el-table-column>
            <el-table-column prop="smsPwd" label="短信密码"></el-table-column> 
            <el-table-column prop="smsServiceId" label="短信业务代码"></el-table-column>
            <el-table-column prop="smsMsgSrc" label="短信企业代码"></el-table-column> 
            <el-table-column prop="smsSrcTerminalId" label="短信服务代码"></el-table-column>   
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="showEditAccount(scope.row)">编 辑</el-button>
                    <!-- <el-button type="text" size="small" @click="changeStateHandle(scope.row.id)">{{ showbtnText(scope.row.state) }}</el-button> -->
                </template>    
            </el-table-column>
        </el-table>       
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="tbpg.currentPage"
            :page-sizes="[15, 50, 100, 500]"
            :page-size="tbpg.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tbpg.total">
        </el-pagination>  
        <el-dialog :title="title" :visible.sync="accountVisibale" width="600px" @close="cancel" :close-on-click-modal="false">
            <el-form ref="addOrEditAccountForm" :model="addOrEditAccountForm" :rules="addOrEditAccountRules" label-width="120px">                
                <el-form-item label="供应商：" prop="supplierName">
                    <el-input v-model.trim="addOrEditAccountForm.supplierName" clearable></el-input>
                </el-form-item>
                <el-form-item label="账号：" >
                    <el-input v-model.trim="addOrEditAccountForm.account"   clearable></el-input>
                </el-form-item>
                <el-form-item label="密码：" prop="pwd">
                    <el-input v-model.trim="addOrEditAccountForm.pwd"  clearable></el-input>
                </el-form-item>
                <el-form-item label="密钥 ：" prop="pwdKey">
                    <el-input v-model.trim="addOrEditAccountForm.pwdKey"  clearable></el-input>
                </el-form-item>
                <el-form-item label="所属类别：">
                    <el-select v-model="addOrEditAccountForm.type" placeholder="请选择">
                        <el-option :value="1" label="中国电信"></el-option>
                        <el-option :value="2" label="中国PB移动"></el-option>                        
                        <el-option :value="3" label="中国联通"></el-option>
                        <el-option :value="4" label="中国CT移动"></el-option>
                        <el-option :value="15" label="PB_BOSS移动"></el-option>
                        <el-option :value="16" label="山东妙手物联"></el-option>
                         <el-option :value="17" label="上海量讯"></el-option>
                          <el-option :value="18" label="DCP电信"></el-option>
                           <el-option :value="19" label="广东移动"></el-option>
                             <el-option :value="20" label="前海通信"></el-option>
                             <el-option :value="21" label="北纬通信"></el-option>
                    </el-select>
                </el-form-item> 
                <el-form-item label="短信账号：" >
                    <el-input v-model.trim="addOrEditAccountForm.smsAccount"  clearable></el-input>
                </el-form-item>

                <el-form-item label="短信密码：" prop="smsPwd">
                    <el-input v-model.trim="addOrEditAccountForm.smsPwd"  clearable></el-input>
                </el-form-item>

                <el-form-item label="短信业务代码：" prop="smsServiceId">
                    <el-input v-model.trim="addOrEditAccountForm.smsServiceId"  clearable></el-input>
                </el-form-item>

                <el-form-item label="短信企业代码：" prop="smsMsgSrc">
                    <el-input v-model.trim="addOrEditAccountForm.smsMsgSrc"  clearable></el-input>
                </el-form-item>

                <el-form-item label="短信服务代码：" prop="smsSrcTerminalId">
                    <el-input v-model.trim="addOrEditAccountForm.smsSrcTerminalId"  clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="addOrEidtAccountHandle">确 定</el-button>
            </div>            
        </el-dialog>  
    </div>
</template>
<script>
import { getSupplierListPage, addAccount, editAccount,  changeAccountState } from '@/api/system.js'
import common from '@/utils/common.js'
export default {
    data(){
        return {
            searchForm: {
                name: ''
            },
            tbpg: {
                tableData: [],
                currentPage: 1,
                pageSize: 15,
                total: 0,                 
            },            
            addFlag: false,
            accountVisibale: false,
            currentId: '',
            addOrEditAccountForm: {
                currentId: null,
                account: '',
                pwd: '',
                pwdKey: '',
                supplierName: '',
                type: 1,
                smsAccount: '',
                smsPwd: '',
                smsServiceId: '',
                smsMsgSrc: '',
                smsSrcTerminalId: '',
            },
            title: '', 
            addOrEditAccountRules: {
                supplierName: [
                    {required: true, message: '请输入供应商名称', trigger: 'blur'}
                ],
                // account: [{required: true, validator: this.checkAccount, trigger: 'blur'}],
                // smsAccount: [{required: true, validator: this.checkAccount, trigger: 'blur'}],
                pwd: [
                    {required: true, message: '请输入密码', trigger: 'blur'}
                ],
                pwdKey: [
                    {required: true, message: '请输入密钥', trigger: 'blur'}
                ]
            }        
        }
    },
    methods: {     
        cancel(){
            this.accountVisibale = false;
            this.$refs.addOrEditAccountForm.resetFields(); 
            for( let key in this.addOrEditAccountForm ){
                this.addOrEditAccountForm[key] = ''  ;
            }        
        },
        // showbtnText(state){
        //     return common.showTxtByState(state, {0: '启用', 1: '禁用'})
        // },        
        getAccountHandle($event){
            common.resetCurrentPage(this, $event, 'tbpg');
            var data = common.getRequestParams(this, 'tbpg', this.searchForm);
            getSupplierListPage(data).then(res => {
                common.listCallback(this, res, 'tbpg');
            })
        },
        showAddAccount(){
            this.title = '新增账户';
            this.addFlag = true;
            this.accountVisibale = true;
        },
        showEditAccount(row){
            this.title = '修改账户';
            this.addFlag = false;
            this.accountVisibale = true;            
            this.addOrEditAccountForm = JSON.parse(JSON.stringify(row));
            this.addOrEditAccountForm .currentId = row.id;
        },
        addOrEidtAccountHandle(){
            this.$refs.addOrEditAccountForm.validate(valid => {
                if(valid) {
                    var data = this.addOrEditAccountForm;
                    if(this.addFlag == true){
                        addAccount(data).then(res => callback(res))
                    }else{
                        data.id = this.addOrEditAccountForm.currentId
                        editAccount(data).then(res => callback(res))               
                    }                    
                }
                var _this = this;
                function callback(res){
                    if(res.data.code == 200){
                        _this.getAccountHandle();
                        _this.cancel();
                        _this.accountVisibale = false;
                        
                    }else{
                        _this.$message.error(res.data.message)
                    }                     
                }
            }) 
        },

        handleSizeChange(val){
            this.tbpg.pageSize = val;
            this.getAccountHandle();
        },
        handleCurrentChange(val){
            this.tbpg.currentPage = val
            this.getAccountHandle();
        }        
    },
    created(){
        this.getAccountHandle();
    }
}
</script>
<style lang="less" scoped>

</style>

